<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { listReservation, updateReservation } from '@/api/reservation'
import { listSeat } from '@/api/seat'
import { listRoom } from '@/api/room'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const reservationData = ref({})
function getReservation() {
  listReservation({ userId: userStore.user.userId }).then(res => {
    if (res.data.total) {
      reservationData.value = {}
      if (res.data.rows[0].reservationStatus == '已预约' || res.data.rows[0].reservationStatus == '使用中') {
        reservationData.value = res.data.rows[0]
        // 座位列表，获取座位数量
        listSeat().then(res => {
          // 座位列表，查询所有座位
          listSeat({ pageSize: res.data.total }).then(res => {
            // 筛选出对应座位
            const seatInfo = res.data.rows.find(item => item.id == reservationData.value.seatId)
            if (seatInfo) {
              reservationData.value = {
                ...reservationData.value,
                roomId: seatInfo.roomId,
                seatNum: seatInfo.seatNum
              }
              // 自习室列表，获取自习室数量
              listRoom().then(res => {
                // 自习室列表，获取所有自习室
                listRoom({ pageSize: res.data.total }).then(res => {
                  const roomInfo = res.data.rows.find(item => item.id == reservationData.value.roomId)
                  if (roomInfo) {
                    reservationData.value = {
                      ...reservationData.value,
                      name: roomInfo.name,
                      location: roomInfo.location,
                      rowsCount: roomInfo.rowsCount,
                      colsCount: roomInfo.colsCount,
                      openTime: roomInfo.openTime,
                      closeTime: roomInfo.closeTime,
                    }
                    // console.log(reservationData.value)
                    // console.log(seatInfo)
                    // console.log(roomInfo)
                  }
                })
              })
            }
          })
        })
      }
    }
  })
}
getReservation()
// 签到
function signIn() {
  ElMessageBox.confirm('是否就座？', '提示', {
    confirmButtonText: '是', cancelButtonText: '否', type: 'success'
  }).then(() => {
    // 签到时间
    const signInTime = new Date()
    signInTime.setHours(signInTime.getHours() + 8)
    updateReservation({
      id: reservationData.value.id,
      reservationStatus: '使用中',
      signInTime: signInTime.toISOString().replace('T', ' ').split('.')[0]
    }).then(res => {
      if (res.data.code === 200) {
        getReservation()
        ElMessage.success('签到成功')
      }
    })
  }).catch(() => { })
}
// 签退
function signOut() {
  ElMessageBox.confirm('是否提前结束？', '提示', {
    confirmButtonText: '是', cancelButtonText: '否', type: 'success'
  }).then(() => {
    // 签退时间
    const signOutTime = new Date()
    signOutTime.setHours(signOutTime.getHours() + 8)
    updateReservation({
      id: reservationData.value.id,
      reservationStatus: '完成预约',
      signOutTime: signOutTime.toISOString().replace('T', ' ').split('.')[0]
    }).then(res => {
      if (res.data.code === 200) {
        getReservation()
        ElMessage.success('签退成功')
      }
    })
  }).catch(() => { })
}
// 取消预约
function cancelReservation() {
  ElMessageBox.confirm('确定取消预约吗？', '提示', {
    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
  }).then(() => {
    updateReservation({
      id: reservationData.value.id,
      reservationStatus: '取消预约'
    }).then(res => {
      if (res.data.code === 200) {
        getReservation()
        ElMessage.success('取消预约成功')
      }
    })
  }).catch(() => { })
}
</script>

<template>
  <div class="my-reservation" v-if="reservationData.id">
    <div class="title">
      <h2>我的预约</h2>
      <el-tag>{{ reservationData.reservationStatus }}</el-tag>
    </div>
    <div class="reservation">
      <div class="info">
        <h4>{{ reservationData.name }}</h4>
        <p><b>布局：</b>{{ reservationData.rowsCount }}行 ~ {{ reservationData.colsCount }}列</p>
        <p><b>位置：</b>{{ reservationData.location }}</p>
        <p><b>座位号：</b>{{ reservationData.seatNum }}</p>
        <p><b>开放时间：</b>{{ reservationData.openTime }} ~ {{ reservationData.closeTime }}</p>
        <p><b>预约时间：</b>{{ reservationData.reservationInTime }}</p>
        <p><b>超时时间：</b>{{ reservationData.reservationOutTime }}</p>
        <p style="color: #F56C6C;"><b>注意：</b>超时未签到违约1次累计3次禁约7天</p>
      </div>
      <div class="btn">
        <div v-if="reservationData.reservationStatus == '使用中'">
          <el-tag type="success">已签到</el-tag>
          <el-button type="primary" size="small" @click="signOut">提前结束</el-button>
        </div>
        <div v-else>
          <el-button type="primary" size="small" @click="signIn">签 到</el-button>
          <el-button type="danger" size="small" @click="cancelReservation">取消预约</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my-reservation {
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 10px;

    h2 {
      color: #555555;
      font-size: 16px;
    }
  }

  .reservation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 5px 0 #00000040;

    .info {
      color: #555555;

      h4 {
        font-size: 18px;
      }

      p {
        font-size: 12px;
      }
    }

    .btn {
      width: 80px;

      .el-tag,
      .el-button {
        margin: 10px 0;
        float: right;
      }
    }
  }
}
</style>